<template>
    <div class="recommend">
        <list class="list">
            <cell class="slider">
                <slider class="slider" auto-play="true" interval="1000" @change="onchange">
                    <div class="frame" v-for="img in imageList">
                        <image class="image" resize="cover" :src="img.src"></image>
                    </div>
                    <indicator class="indicator"></indicator>
                </slider>
            </cell>
            <cell class="cell" v-for="(value, index) in recommendList">
                <div class="sectionName">
                    <text class="text">section{{index}}</text>
                </div>
                <section class="top"/>
                <div class="row">
                    <section class="mid-left" />
                    <section class="mid-right" :isLogoShow="false"/>
                </div>
                <div class="row">
                    <section class="bottom-left" :isLogoShow="false"/>
                    <section class="bottom-right"/>
                </div>
            </cell>
        </list>
    </div>
</template>

<style scoped>
    .recommend {

    }
    .top {
        height: 600px;
    }
    .row {
        height: 600px;
        flex-direction: row;
    }
    .mid-left {
        flex: 4;
    }
    .mid-right {
        flex: 3;
    }
    .bottom-left {
        flex: 3;
    }
    .bottom-right {
        flex: 4;
    }
    .sectionName {
        height: 100px;
        justify-content: center;
        text-align: left;
        margin: 10px;
        padding-left: 20px;
        border-width: 2px;
        border-style: solid;
        border-color: #000;
    }
    .text {
        color: white;
        font-size: 48px;
    }
    .image {
        width: 750px;
        height: 300px;
    }
    .slider {
        /*margin-top: 25px;*/
        /*margin-left: 25px;*/
        width: 750px;
        height: 300px;
        border-width: 2px;
        border-style: solid;
        border-color: #41B883;
    }
    .frame {
        width: 750px;
        height: 300px;
        position: relative;
    }
    .indicator {
        width: 750px;
        height: 300px;
        item-color: white;
        item-selected-color: orange;
        item-size: 20px;
        position: absolute;
        top: 100px;
        left: 200px;
    }
</style>

<script>
    import section from '../components/section/section.vue'

    export default {
        components: { section },
        data() {
            return {
                recommendList: [0, 1, 2],
                imageList: [
                    { title: 'item A', src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
                    { title: 'item B', src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
                    { title: 'item C', src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
                ]
            }
        }
    }
</script>